<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理平台</title>
    <link rel="shortcut icon" href="/static/img/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="/static/fonts/ali/iconfont.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <script src="/static/js/jquery-3.5.1.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<div class="main-content">
<!-- 顶部选项栏 -->
    <div class="navbar-fixed-top navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="javascript:void(0);" class="navber-brand"><img src="/static/img/page-logo.png" alt="logo"></a>
            </div>
            <ul class="nav navbar-nav navbar-right hide">
                <li><a class="font-color" href="/login/"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a class="font-color dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                        <img class="portrait" src="/static/img/headportrait.jpg" alt="头像">
                        {% block user %}
                        <span>范先生</span>
                        {% endblock user %}
                    </a>
                    <ul class="dropdown-menu center">
                        <li><a href="javascript:void(0)">账号设置</a></li>
                        <li class="divider"></li>
                        <li><a href="/logout/">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
<!-- 左边选项栏 -->
    <div class="navbar-left">
        <ul class="nav nav-pills nav-stacked">
            <li class="left-list">
                <a class="list-bar" href="/index/">
                    <span class="iconfont icon-zhuye"></span>
                    <span>首页</span>
                </a>
            </li>
            <li class="left-list">
                <a class="list-show" href="javascript:void(0);">
                    <span class="iconfont icon-tushu"></span>
                    <span>图书管理</span>
                    <i class="iconfont icon-jiahao"></i>
                </a>
                {% block book %}
                <ul class="nav nav-pills nav-stacked sub-left-list">
                    <li><a href="/add_book/"><span>添加图书</span></a></li>
                </ul>
                {% endblock book %}
            </li>
            <li class="left-list">
                <a class="list-show" href="javascript:void(0);">
                    <span class="iconfont icon-zuozhe"></span>
                    <span>作者管理</span>
                    <i class="iconfont icon-jiahao"></i>
                </a>
                {% block author %}
                <ul class="nav nav-pills nav-stacked sub-left-list">
                    <li><a href="/view_author/"><span>查看作者</span></a></li>
                    <li><a href="/add_author/"><span>添加作者</span></a></li>
                </ul>
                {% endblock author %}
            </li>
            <li class="left-list">
                <a class="list-show" href="javascript:void(0);">
                    <span class="iconfont icon-chubanshe"></span>
                    <span>出版社管理</span>
                    <i class="iconfont icon-jiahao"></i>
                </a>
                {% block publish %}
                <ul class="nav nav-pills nav-stacked sub-left-list">
                    <li><a href="/view_publish/"> <span>查看出版社</span></a></li>
                    <li><a href="/add_publish/"> <span>添加出版社</span></a></li>
                </ul>
		        {% endblock publish %}
            </li>
        </ul>
    </div>
    <script>
        $(".list-show").click(function() {
            $(this).children('i').toggleClass('icon-jiahao').toggleClass('icon-jianhao'); // 点击加号改成减号
            $(this).parent('.left-list').find('.active').removeClass('active')
            $(this).next('.sub-left-list').slideToggle(200)  //折叠菜单
                .parent('.left-list').siblings('.left-list').children('.sub-left-list').slideUp(200)  //把已经点开的折起来
                .prev('.list-show').children('i').attr('class', 'iconfont icon-jiahao')  //然后还原成加号
        })
    </script>

<!-- 内容区域 -->
	<div class="container">
		{% block container %}
			<p>这里必须写内容</p>
		{% endblock container %}
	</div>
</div>
</body>
</html>